<style lang="scss" scoped>
	.feed-video {
		width: 750upx;
		box-shadow: 0 0 2upx 0 #666;
	}

	.v-title {
		width: 700upx;
		font-size: 32upx;
		margin-left: 25upx;
		margin-bottom: 40upx;
		margin-top: 20upx;
		text-align: left;
		line-height: 52upx;
	}

	.feed-user {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		margin: 20upx 0 0 25upx;

		.info {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: flex-end;
			align-items: left;
			margin-left: 20upx;
			font-size: 24upx;
			font-weight: bolder;
			color: #1f2046;
		}
	}

	.feed-info {
		width: 700upx;
		margin-top: 20upx;
		margin-left: 25upx;
		text-align: center;
		padding-bottom: 10upx;

		.title {
			font-size: 32upx;
			margin-bottom: 30upx;
			text-align: left;
			line-height: 52upx;
			color: #666;
		}

		.feed-imgs {
			margin: 5upx 0;
			width: 100%;
			// border-radius: 5upx;
			// box-shadow: 0 0 6upx 0 #666;
		}
	}

	.other {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		padding: 40upx 0 20upx;
		font-size: 24upx;
		color: #888;

		.micon {
			padding: 10upx 20upx;
		}
	}

	.line {
		height: 30upx;
		width: 750upx;
		background-color: #f3f3f3;
	}
</style>

<template>
	<view v-if="getRequestOK">

		<view v-if="oneFeed.video">
			<video v-if="oneFeed.videoHeight" class="feed-video" style=" height : 1000upx;"
				:src="oneFeed.video.resource.url" play-btn-position="bottom" :title="oneFeed.feed_content"
				object-fit="cover" :muted="true" :loop="true" :autoplay="true" :show-mute-btn="true" :controls="true" />
			<video v-else class="feed-video" style=" height : 525upx;" :src="oneFeed.video.resource.url"
				play-btn-position="bottom" :title="oneFeed.feed_content" object-fit="cover" :muted="true" :loop="true"
				:autoplay="true" :show-mute-btn="true" :controls="true" />
			<view class="v-title" v-if="!!oneFeed.feed_content">{{ oneFeed.feed_content }}</view>
		</view>


		<view class="feed-user" @tap.stop=" gotoLink( '/feed/otherUser?id=' + oneFeed.user.id ) ">
			<u-avatar size="60" class="avatar" :src=" oneFeed.user.avatar" />
			<view class="info">
				<text>{{ oneFeed.user.name }}</text>
			</view>
		</view>
		<view class="feed-info">
			<view class="title" v-if="!oneFeed.video&&!!oneFeed.feed_content">{{ oneFeed.feed_content }}</view>
			<image class="feed-imgs" mode="widthFix" v-for="(imageItem, index) in oneFeed.images" :key="index"
				:src="imageItem.url" @tap="previewImage(index)" />
			<!-- 商品关联卡片 -->
			<product-card v-if="oneFeed.product_id >= 0" :product_id="oneFeed.product_id" />
			<view class="other">
				<text>{{ oneFeed.created_at | timeFormate }}发布 {{ oneFeed.feed_view_count }}阅读</text>
				<u-icon class="micon" name="more-dot-fill" color="#888" size="40" @tap="openSheet" />
			</view>
		</view>
		<view class="line" />

		<!-- 评论组件信息 -->
		<comment :data="oneFeed" type="feeds"  ref="comment"/>
	</view>
</template>

<script>
	// 引入时间格式化函数
	import timeFrom from "../uview-ui/libs/function/timeFrom.js";
	// 引入商品卡组件
	import productCard from "../components/basic/productCard.vue";
	// 引入评论组件
	import comment from "../components/basic/comment.vue";
	import {
		$storage
	} from "@/utils";
	export default {
		components: {
			productCard,
			comment,
		},
		data() {
			return {
				// 数据请求状态
				getRequestOK: false,
				// 当前动态详情
				oneFeed: {
					user: {
						avatar: "",
					},
					created_at: "",
					feed_content: "",
					images: [],
					feed_comment_count: 0,
					like_count: 0,
				},
			};
		},
		async onLoad(options) {
			
	
			// uni.on("loadingError",(res)=>{
			// 	if(res){
			// 		uni.pageScrollTo({
			// 			scrollTop:999999,
			// 			duration:0
			// 		})
			// 		uni.pa
			// 	}
				
			// })
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			uni.showToast({
				title: "数据加载中...",
				icon: "loading",
				duration: 500,
			});
			// 获取当前动态详情
			let oneFeed = await this.$u.api.getOneFeed({
				id: options.id,
			});
			if (!!oneFeed.user.avatar && !!oneFeed.user.avatar.url) {
				oneFeed.user.avatar = oneFeed.user.avatar.url;
			}
			if (!!oneFeed.video) {
				(oneFeed.video.cover.dimension.height / oneFeed.video.cover.dimension.width) > 1 ? oneFeed
					.videoHeight = true : oneFeed.videoHeight = false;
			}
			// 数据埋点
			this.$$Rangers.event('page_view', {
				platform: '小程序',
			})
			this.$$Rangers.event('infor_page_view', {
				information_type: !!oneFeed.video ? '短图文' : '短视频',
				platform: '小程序',
			})

			this.oneFeed = oneFeed;
			this.getRequestOK = true;
		},
		// 分享到朋友圈设置
		onShareTimeline() {
			let title = this.oneFeed.feed_content;
			if (title.length > 21) {
				title = title.substring(0, 21) + "..."
			}
			return {
				title,
				query: 'id=' + this.oneFeed.id,
				imageUrl: this.oneFeed.images[0].url
			}
		},
		onReachBottom(){
			this.$refs.comment.bottomAddData();
		},
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		methods: {
			// 跳转到动态列表页面
			gotoLink(url) {
				if (url.indexOf('otherUser') > -1) {
					const user = $storage.get("user");
					if (!!user && !!user.id && user.id == url.split("=")[1]) {
						uni.switchTab({
							url: '/pages/newUser'
						})
						return;
					}
				}
				uni.navigateTo({
					url,
				});
			},
			// 预览图片
			previewImage(index) {
				console.log(this.oneFeed.images);
				//预览图片
				var current = this.oneFeed.images[index].path;
				let urls = [];
				this.oneFeed.images.map((item) => {
					urls.push(item.url);
				});
				uni.previewImage({
					current: current,
					urls,
				});
			},
			// 打开举报弹窗
			openSheet() {
				let itemList = ["举报"];
				if (uni.getStorageSync("user").data.id == this.oneFeed.user_id) {
					itemList = ["删除"];
				}

				uni.showActionSheet({
					itemList,
					success: async (res) => {
						if (itemList[res.tapIndex] == "举报") {
							uni.navigateTo({
								url: '/feed/report?id=' + this.oneFeed.id
							})
						} else {
							console.log(this.oneFeed.id)
							// 删除当前评论
							await this.$u.api.delectOneFeed(this.oneFeed.id);
							// 首页 移除当前动态，总动态条数 -1
							uni.$emit("removeOneFeed", this.oneFeed.id);
							// 触发 删除事件
							uni.showToast({
								title: "当前动态已删除",
								duration: 1000,
								success: () => {
									// 跳转至上一页，触发更新页面
									let timer = setTimeout(() => {
										clearTimeout(timer);
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								}
							})
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					},
				});
			}
		}
	};
</script>
